// colors
@import "./common.scss";

.view-container {
  height: calc(100vh - #{$th});
  overflow: auto;
}
.bgc {
  &:hover {
    transition: all 0.3s ease;
    background-color: $primary;
    // transform: translate(0, 2px);
    box-shadow: 10px -10px 25px 0px#546e7a,
      -10px 10px 25px 0px rgba(39, 200, 255, 0.25);
  }
}
.cc {
  cursor: pointer;
}
$border-color: map-get($colors, "light-1");
// font size
$base-font-size: 1rem;
$font-sizes: (
  xxs: 0.6154,
  xs: 0.7692,
  //10px
    sm: 0.9231,
  //12px
    md: 1,
  //13px
    lg: 1.0769,
  //14px
    xl: 1.2308,
  //16px,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
);
$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around
);
$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
);
// spacing
// 0-5: 0
// .mt-1  => margin top  .pb-2
$spacing-types: (
  m: margin,
  p: padding
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left
);
$spacing-base-size: 1rem;
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3
);
// reset 样式重置区域
* {
  box-sizing: border-box;
  outline: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  user-select: none;
}
html {
  font-size: 13px;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;

  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
a {
  color: #999;
}
p {
  line-height: 2em;
}

@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}
// text align
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}
// text overflow
.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// width, height
// .w-100 {
//   width: 100% !important;
// }
// .h-100 {
//   height: 100% !important;
// }

$width-sizes: (
  10: 10%,
  20: 20%,
  30: 30%,
  40: 40%,
  50: 50%,
  60: 60%,
  70: 70%,
  80: 80%,
  90: 90%,
  100: 100%
);

@each $key, $value in $width-sizes {
  .w-#{$key} {
    width: $value !important;
  }
  .h-#{$key} {
    height: $value !important;
  }
}

// flex
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}
.flex-1 {
  flex: 1;
}
.flex-grow-1 {
  flex-grow: 1;
}
.fw-b {
  font-weight: bolder;
}

// m-0, mx-0
@each $typeKey, $type in $spacing-types {
  // .m-1
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size * $spacing-base-size;
    }
  }
  // .mx-1 , .my-1
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }
    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }
  // .mt-1
  @each $directionKey, $direction in $spacing-directions {
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }
}
// 其他样式
$pr: #007b35;
.menus-select {
  color: $pr;
  border-bottom: 2.5px solid $pr;
}
.menu2-dn {
  display: none;
}
.menu2 {
  position: absolute;
  right: 0px;
  top: 6vh;
  width: 190px;
  background-color: #ffffff;
  text-align: center;
  font-size: 1.2rem;
  padding: 10px;
  z-index: 2999;
  a {
    text-decoration: none;
  }
}
.menu2-select {
  color: whitesmoke;
  a {
    color: whitesmoke;
  }
  background-color: $pr;
  border-bottom: 2.5px solid $pr;
}
.blue {
  background-color: #409eff !important;
  color: #fff !important;

  border-color: #409eff !important;
  border-radius: 0px;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  // height: 85vh;
  // overflow: scroll;
}

//  表格树
.tree .el-tree-node__content {
  height: 52px !important;
  overflow: hidden;
  border-bottom: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  white-space: normal;
  list-style: none;
  box-sizing: border-box;
}
// 设置自定义样式

.el-icon-caret-right::before {
  content: "";
  background: url()
    no-repeat;
  width: 15px;
  height: 15px;
  display: inline-block;
}

.el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.file-tree-items .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.el-tree-node__expand-icon.expanded::before {
  content: "";
  background: url()
    no-repeat;
  width: 15px;
  height: 15px;
  display: inline-block;
}

.file-tree-items .el-tree-node__expand-icon.expanded::before {
  font-family: "iconfont" !important;
  content: "\E61A";
  width: 15px;
  height: 15px;
  display: inline-block;
  color: #ffc822;
  font-size: 16px;
  margin-right: 4px;
}

.el-tree-node__expand-icon.is-leaf::before {
  content: "";
  background: url()
    no-repeat;
  width: 13px;
  height: 15px;
  display: inline-block;
}

.file-tree-items .el-tree-node__expand-icon.is-leaf::before {
  content: "";
  background: url()
    no-repeat;
  width: 13px;
  height: 15px;
  display: inline-block;
}
//  美化进度条
// // 美化选中
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
//   color: $pr;
//   font-weight: bold;
// }
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
//   background-color: #f0f7ff;
// }

// // 美化滚动条
// ::-webkit-scrollbar-track-piece {
//   //滚动条凹槽的颜色，还可以设置边框属性
//   background-color: #d4d4d456;
//   border-radius: 5px;
// }
// ::-webkit-scrollbar {
//   //滚动条的宽度
//   width: 5px;
//   height: 9px;
//   border-radius: 5px;
// }
// ::-webkit-scrollbar-thumb {
//   //滚动条的设置
//   //   background-color: #52525241;
//   background-clip: padding-box;
//   min-height: 28px;
//   border-radius: 5px;
// }
// ::-webkit-scrollbar-thumb:hover {
//   background-color: rgba(121, 118, 118, 0.705);
// }
//  登录页样式
//  svg 样式

g.terminal,
g.line,
g.grounding,
g.fuse,
g.goto,
g.mod,
.fusebox {
  cursor: pointer;
}

g.mod:hover {
  filter: url(#drop-shadow);
}

g.line:hover {
  filter: url(#drop-shadow);
}

a.tz:hover {
  filter: url(#drop-shadow);
}

g.terminal:hover {
  filter: url(#drop-shadow);
}
//
#main1 .cson img {
  width: 100%;
}
.d-n {
  display: none;
}

//  故障
.cases-4 {
  .el-button {
    margin-top: 1.5rem;
    line-height: 1.5rem;
    width: 40px;
  }
}

.steps {
  // min-width: 500px;
  // background-color: azure;
  margin: auto;

  padding: 15px;
  font-size: 14px;
  .f1 {
    /* background-color: sandybrown; */
    height: 60px;
    display: flex;
  }

  .a1,
  .a3 {
    width: 33%;
    line-height: 60px;
    text-align: center;
    margin-right: 0.5%;
    border: solid black 1px;
    font-weight: bold;
    /* box-sizing: border-box; */
  }
  .a1 {
    cursor: pointer;
    line-height: 15px;
    padding: 7px;
    border-radius: 15px;
    text-align: left;
  }
  .a1-1 {
    line-height: 60px;
    padding: 0px;
    text-align: center;
  }

  .a3 {
    margin-left: -8px;
    // background-color: springgreen;
  }
  .a3-1 {
    background-color: #ffd13e;
  }

  .a2 {
    width: 20%;
    text-align: center;
    line-height: 40px;
    display: flex;
    margin-left: -5px;
    position: relative;
  }

  .l1 {
    /* background-color: salmon; */
    border-bottom: solid 2px black;
    width: 95%;
    height: 51%;
    box-sizing: border-box;
  }

  .l2 {
    margin: auto;
    width: 7%;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent transparent black;
    box-sizing: border-box;
  }

  .l3 {
    position: absolute;
    left: 30%;
    transform: translateX(-50%);
  }

  .f2 {
    /* background-color: seagreen; */
    margin-left: 0px;
    margin-top: 0px;
    height: 50px;
    width: 33%;
    position: relative;
    background-image: "./arrow.svg";

    background-position: center center;
    background-size: 20px 115%;
  }

  .b1 {
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    /* background-color: #F4A460; */
  }

  .b2 {
    position: absolute;
    left: 49%;
    height: 100%;

    width: 2px;
    /* background-color: black; */
    transform: translateX(-50%);
    /* text-align: center; */
  }

  .b3 {
    background-color: black;
    width: 2px;
    height: 90%;
  }

  .b4 {
    /* background-color: sienna; */
    margin-left: -200%;
    height: 10%;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
    box-sizing: border-box;
  }
}
.select {
  background: seagreen;
  color: white;
}
.pf {
  position: fixed;
}

// 自定义的卡片

.tip {
  width: 330px;
  height: 120px;
  background-color: #666;
  margin-top: 60px;
  margin-right: 10px;
  display: flex;
  justify-content: space-between;
  border-radius: 25px;
  cursor: pointer;

  .tip-tl {
    color: white;
    width: 90px;
    position: relative;
    padding-left: 12px;

    img {
      width: 100%;
      position: absolute;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      width: 100px;
    }
  }
  .tip-tr {
    width: calc(100% - 90px);
    font-size: 29px;
    font-weight: bolder;

    .tt {
      padding-left: 45px;
      line-height: 120px;
    }
  }
}
// 美化选中
.el-tree-node {
  background-color: #5b7e3c;
  color: white;
  font-weight: bold;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: white;
  background-color: #4a733d;

  font-weight: bold;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #4a733d;
}
.el-tree-node__content:hover {
  background-color: #4a733d;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #4a733d;
}
